<template>
	<view>
		<view class="search-top">
			<input class="search-inp" type="text" placeholder="请输入商品名称" v-model="keyword" @input="onInput">
			<button @click="onSearch(keyword)">搜索</button>
		</view>
		
		<!-- 搜索的相关词条 -->
		<view v-show="searchList.length" class="searchList">
			<view @click="searchListTap(item.name)" v-for="(item,index) in searchList" :key="index">
				{{item.name}}
			</view>
		</view>
		
		<view class="sear_record">
			<view class="search_rTit">
				<text class="search_pa">历史搜索</text>
				<text class="iconfont icon-lajitong" @click="clear"></text>
			</view>
			<view class="search_hotBox" v-if="history.length">
				<view v-for="(item,index) in history" :key="index" @click="searchListTap(item)">
					{{item}}
				</view>
			</view>
			<view v-else style="text-align: center;color: #b0b0b0;">
				暂无搜索记录
			</view>
		</view>
		<cl-confirm ref="search"></cl-confirm>
	</view>
</template>

<script>
	function debounce(fn,t=500){
		let timer = null;
		return function(...arg){
			clearTimeout(timer);//把已经存在的 计时器 给清掉
			timer = setTimeout(v=>{
				fn.apply(this,arg)
				// apply 用来改变this指向的
			},t)//重新计时
		}
	}
	
export default {
	data() {
		return {
			host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			keyword:'',//输入的内容
			searchList:[],
			history:[],//用来放历史记录
		};
	},
	onLoad() {
		
	},
	created() {
		// 一进来 就要 判断 有没有历史记录
		
		let history=uni.getStorageSync('history');//两种情况  1.第一次来 没搜索过没历史记录 是个undefined  2.搜索过 有记录 有数据
		if(history){
			this.history=JSON.parse(history) //用JSON.parse转化一下
		}
	},
	watch:{
		// 监控着keyword
		keyword(n){
			if(n.trim().length===0){
				this.searchList=[]
			}
			// encodeURIComponent()//把传过去的内容 进行encode转码
			// decodeURIComponent()//解码
		}
	},
	// 函数防抖   
	// 上一个字符的输入  到现在的字符的输入小于 设定的秒数 先不请求接口  大于设定的秒数 再请求
	// 类似于电梯 上来一个人等3s 3s内没别人进  电梯就关门 有人进来了  从新计时
	methods: {
		onInput:debounce(function(e){
			// console.log(e.detail.value);
			e=e.detail.value.trim();// 去掉前后空格
			
			if(e.length===0) return//如果没有输入东西 或者只输入了空格 不操作
			
			// 搜索的内容 进行联想
			uni.request({
				method:'POST',
				data:{
					keyword:e,//搜索的关键字
					skip:0,//从哪个数据开始拿
					limit:10,//一次拿几个数据
				},
				url:this.host+'/api/get_search_list',
				success:(res)=> {
					console.log(res);
					if(res.data.code==1){
						this.searchList=res.data.data
						// console.log(this.searchList);
					}
				}
			})
		}),
		onSearch(keyword){
			keyword=keyword.trim();// 去掉前后空格
			// console.log(keyword);
			this.searchListTap(keyword)//复用一下searchListTap
		},
		searchListTap(name){
			// 重复搜索同一个 会产生多条相同的历史记录  所以再存之前 要先判断一下
			// findIndex查找  用name 去原来已经存的数组里去找 找到了就返回原来存过的相同值的索引  没找到会返回-1
			let index=this.history.findIndex(v=>v===name);//判断有没有重复的name
			if(index>=0){
				// index>=0 说明原来已经 存过了//所以要  把之前的相同历史记录删掉  重新存  在头部重新添加
				this.history.splice(index,1)// 把之前的历史记录删掉 
			}
			// 在头部重新添加this.history.unshift(name);
			this.history.unshift(name);//点击联想出来的 内容 点击以后 历史搜索里 会多一条记录
			
			// 在本地内存中间会多一个记录  在localStorage里会多一个记录
			uni.setStorageSync('history',JSON.stringify(this.history))
			
			uni.navigateTo({
				url:`/pages/index/search_list?keyword=${name}`
			})
			
		},
		// 清除所有 历史记录
		clear(){
			this.history=[]
			uni.setStorageSync('history',JSON.stringify(this.history))
		}
	}
};
</script>

<style lang="scss">
	.search-top{
		display: flex;
		justify-content: space-between;
		padding: 15px 10px;
		border-top: 1px solid #e7e7e7;
		border-bottom: 1px solid #e7e7e7;
		
		.search-inp{
			width: 75%;
			height: 30px;
			line-height: 30px;
			border-radius: 18px;
			border: 1px solid #dadada;
			padding-left: 20px;
			font-size: 14px;
		}
		button{
			width: 20%;
			height: 30px;
			line-height: 30px;
			padding: 0 5px;
			color: #fff;
			background-color: #ffd501;
		}
	}
	.searchList{
		position: fixed;
		left: 0;
		right: 0;
		top: 106px;
		bottom: 0;
		overflow-y: auto;
		z-index: 999;
		background-color: #fafafa;
		view{
			width: 92%;
			margin: 0 auto;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			border-bottom: 1px solid #dadada;
			padding-left: 15px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			
		}
	}
	
page {
	background: #fff;
}
/deep/ .cl-card__header {
	height: 0;
}
/deep/ .cl-card {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-shadow: 0 1px 1px rgba(0,0,0,.06);
	border-radius: 0;
}
/deep/ .cl-button.cl-button--success{
	background-color: $color1;
	    border-color: $color1;
}
.sear_record {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 0 30upx;
	.search_rTit {
		width: 100%;
		height: auto;

		overflow: hidden;
		.search_pa {
			font-size: 30upx;
			color: #333;
			line-height: 80upx;
			font-weight: bold;
		}
		.iconfont {
			font-size: 36upx;
			float: right;
			line-height: 80upx;
			color: #666;
		}
	}
	.search_hotBox {
		width: 100%;
		height: auto;
		overflow: hidden;
		view {
			display: inline-block;
			font-size: 28upx;
			line-height: 56upx;
			background: #eee;
			padding: 0 30upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 40upx;
		}
	}
}
</style>
